<!DOCTYPE HTML>
<html>

<head>
    <title>产品详情 - 二手电子乐园</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="description" content="查看二手电子产品详细信息" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css" />
    <style>
        .product-detail {
            max-width: 1200px;
            margin: 0 auto;
        }

        .product-images {
            margin-bottom: 2rem;
        }

        .main-image {
            width: 100%;
            max-width: 600px;
            margin-bottom: 1rem;
        }

        .thumbnail-images {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .thumbnail {
            width: 100px;
            height: 100px;
            object-fit: cover;
            cursor: pointer;
            border: 2px solid transparent;
            border-radius: 4px;
            transition: border-color 0.3s ease;
        }

        .thumbnail:hover,
        .thumbnail.active {
            border-color: #e44c65;
        }

        .product-info {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        .product-title {
            font-size: 2rem;
            color: #333;
            margin-bottom: 1rem;
        }

        .product-price {
            font-size: 2.5rem;
            color: #e44c65;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .product-description {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #666;
            margin-bottom: 2rem;
        }

        .seller-info {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid #e1e1e1;
        }

        .seller-title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .seller-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .seller-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .contact-btn {
            background: #e44c65;
            color: white;
            padding: 1rem 2rem;
            border: none;
            border-radius: 4px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-top: 1rem;
        }

        .contact-btn:hover {
            background: #d63851;
        }

        .specs-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 1rem;
        }

        .specs-table th,
        .specs-table td {
            padding: 0.8rem;
            text-align: left;
            border-bottom: 1px solid #e1e1e1;
        }

        .specs-table th {
            background: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>

<body class="is-preload" v-cloak>
    <div id="page-wrapper">
        <div id="header-container"></div>

        <!-- Main Content -->
        <section id="main" class="wrapper style2">
            <div class="title">产品详情</div>
            <div class="container" id="product-app">
                <div class="product-detail" v-if="product">
                    <div class="row">
                        <!-- 产品图片 -->
                        <div class="col-6 col-12-medium">
                            <div class="product-images">
                                <img :src="product.images[currentImageIndex]" :alt="product.title" class="main-image" />
                                <div class="thumbnail-images">
                                    <img v-for="(image, index) in product.images" :key="index" :src="image"
                                        :alt="product.title" class="thumbnail"
                                        :class="{ active: currentImageIndex === index }"
                                        @click="currentImageIndex = index" />
                                </div>
                            </div>
                        </div>

                        <!-- 产品信息 -->
                        <div class="col-6 col-12-medium">
                            <div class="product-info">
                                <h1 class="product-title">{{ product.title }}</h1>
                                <div class="product-price">¥{{ product.price }}</div>
                                <div class="product-description">{{ product.description }}</div>

                                <!-- 产品规格 -->
                                <div v-if="product.specs">
                                    <h3>产品规格</h3>
                                    <table class="specs-table">
                                        <tr v-for="(value, key) in product.specs" :key="key">
                                            <th>{{ key }}</th>
                                            <td>{{ value }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 卖家信息 -->
                    <div class="seller-info">
                        <h2 class="seller-title">
                            <i class="icon solid fa-user"></i>
                            卖家信息
                        </h2>
                        <div class="seller-details">
                            <div class="seller-item">
                                <i class="icon solid fa-user"></i>
                                <span><strong>姓名：</strong>{{ product.seller.name }}</span>
                            </div>
                            <div class="seller-item">
                                <i class="icon solid fa-map-marker-alt"></i>
                                <span><strong>所在地：</strong>{{ product.seller.location }}</span>
                            </div>
                            <div class="seller-item" v-if="showContactInfo">
                                <i class="icon solid fa-phone"></i>
                                <span><strong>联系电话：</strong>{{ product.seller.phone }}</span>
                            </div>
                        </div>
                        <button class="contact-btn" @click="handleContact">
                            {{ showContactInfo ? '隐藏联系方式' : '查看联系方式' }}
                        </button>
                    </div>
                </div>

                <!-- 加载中状态 -->
                <div v-else style="text-align: center; padding: 3rem;">
                    <p>正在加载产品信息...</p>
                </div>
            </div>
        </section>

        <div id="footer-container"></div>
    </div>

    <!-- Scripts -->
    <script src="utils/loader.js"></script>
    <script>
        window.addEventListener('scriptsLoaded', function () {
            // 加载页头和页脚组件
            if (typeof fetchHtml !== 'undefined') {
                fetchHtml.fetchAll();
            }

            // 初始化 petite-vue
            if (typeof PetiteVue !== 'undefined') {
                const productApp = {
                    product: null,
                    currentImageIndex: 0,
                    showContactInfo: false,

                    handleContact() {
                        const isLogin = localStorage.getItem('isLogin') === 'true';
                        if (!isLogin) {
                            alert('请先登录后查看联系方式');
                            window.location.href = 'login.html';
                            return;
                        }
                        this.showContactInfo = !this.showContactInfo;
                    },

                    loadProduct() {
                        // 获取URL参数中的产品ID
                        const urlParams = new URLSearchParams(window.location.search);
                        const productId = parseInt(urlParams.get('id'));

                        if (!productId || !window.siteData) {
                            console.error('产品ID无效或数据未加载');
                            return;
                        }

                        // 从所有产品中查找对应的产品
                        const allProducts = [
                            ...window.siteData.featuredProducts,
                            ...window.siteData.recommendedProducts
                        ];

                        const foundProduct = allProducts.find(p => p.id === productId);

                        if (foundProduct) {
                            // 生成多张产品图片
                            const images = [];
                            for (let i = 0; i < 5; i++) {
                                images.push(`https://picsum.photos/600/400?random=${productId}${i}`);
                            }

                            this.product = {
                                ...foundProduct,
                                images: images,
                                specs: this.generateSpecs(foundProduct.category)
                            };

                            // 更新页面标题
                            document.title = `${this.product.title} - 二手电子乐园`;
                        } else {
                            console.error('未找到对应的产品');
                        }
                    },

                    generateSpecs(category) {
                        // 根据产品类别生成规格参数
                        const specs = {
                            phones: {
                                '屏幕尺寸': '6.1英寸',
                                '存储容量': '256GB',
                                '运行内存': '8GB',
                                '电池容量': '3000mAh',
                                '成色': '九成新',
                                '保修': '个人保修3个月'
                            },
                            cameras: {
                                '传感器': '全画幅CMOS',
                                '有效像素': '2400万',
                                '镜头卡口': 'RF卡口',
                                '快门次数': '不到5000次',
                                '成色': '95新',
                                '保修': '个人保修6个月'
                            },
                            digital: {
                                '处理器': 'M1芯片',
                                '内存': '16GB',
                                '存储': '512GB SSD',
                                '屏幕': '13.3英寸 Retina',
                                '成色': '九成新',
                                '保修': '个人保修1年'
                            },
                            refrigerators: {
                                '容量': '215升',
                                '能效等级': '一级能效',
                                '制冷方式': '风冷无霜',
                                '尺寸': '60×55×175cm',
                                '使用年限': '2年',
                                '保修': '厂家保修1年'
                            }
                        };

                        return specs[category] || {
                            '成色': '九成新',
                            '保修': '个人保修3个月'
                        };
                    }
                };

                PetiteVue.createApp(productApp).mount('#product-app');

                // 等待数据加载后再加载产品
                setTimeout(() => {
                    if (window.siteData && productApp.loadProduct) {
                        productApp.loadProduct();
                    }
                }, 500);
            }
        });
    </script>
</body>

</html>